<template>
  <view class="container" v-if="!isLoading">
    <view class="lists" v-if="!isEmpty">
      <view class="item" v-for="item in lists" @tap="$xyfun.to('/pages/benfit/order_detail?id='+item.id)">
        <view class="crumb" :style="'border-color:'+item.card.theme_color">
          <view class="l">{{ $xyfun.timeFormat(item.createtime) }}</view>
          <view class="r"><text class="ts-18">订单号：</text>{{ item.order_sn }}</view>
        </view>
        <view class="info">
          <view class="l">
            <image mode="widthFix" :src="$xyfun.image(item.card.image)"></image>
            <view class="detail">
              <view>{{ item.card.title }}</view>
              <view>￥{{ item.card.price }} x {{item.nums}}</view>
              <view class="overtime" v-if="item.user_card">过期时间:{{ $xyfun.dataFormat(item.user_card.overtime) }}</view>
            </view>
          </view>
          <view class="r">
            <view class="desc">{{ item.card.desc }}</view>
            <view class="but" :style="'background:'+item.card.theme_color">查看全部权益</view>
          </view>
        </view>
        <view class="money">
          <view></view>
          <view class="total">总计:￥<text>{{item.total_fee}}</text></view>
        </view>
      </view>
    </view>
    <view v-else>
      <xy-empty text="暂无数据" />
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty';
export default {
  components: {
    xyEmpty,
  },
  data() {
    return {

      isLoading:true,
      isEmpty: true,
      lists: [],
      currentPage: 1,
      lastPage: 1,
      loadStatus: 'loadmore',
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad() {

    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData(){

      this.$api.post({
        url: '/benfit_order/order_lists',
        loadingTip:'加载中...',
        data: {
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.lists = [...this.lists, ...res.data];
          this.isEmpty = !this.lists.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
          this.isLoading = false;
        }
      });
    },

  }
}
</script>

<style>
page{
  background: #f2f2f2;
}
</style>
<style scoped lang="scss">
.lists{
  padding: 20rpx 20rpx;
  .item{
    background: #fff;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    border-radius: 14rpx;
    padding: 14rpx 0 20rpx 0;
    height: 250rpx;
    box-sizing: border-box;
    .crumb{
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #dfc585;
      padding: 0 20rpx 10rpx 20rpx;
      color: #868686;
      font-size: 22rpx;
      .r{
        font-size: 20rpx;
      }
    }
    .info{
      display: flex;
      justify-content: space-between;
      padding: 20rpx 20rpx 0 20rpx;
      .l{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20rpx;
        image{
          width: 140rpx;
          margin-right: 20rpx;
        }
        .detail{
          font-size: 20rpx;
          view{
            margin-top: 5rpx;
          }
          .overtime{
            font-size: 18rpx;
            color: #868686;
          }
        }
      }
      .r{
        height: 120rpx;
        box-sizing: border-box;
        .desc{
          margin-top: 10rpx;
          font-size: 18rpx;
          text-align: right;
        }
        .but{
          margin-top: 30rpx;
          background: #dfc585;
          color: #fff;
          font-size: 18rpx;
          border-radius: 20rpx;
          padding: 4rpx 20rpx;
        }
      }
    }
    .money{
      display: flex;
      justify-content: space-between;
      .total{
        margin-right: 20rpx;
        text{
          color : #fd1e1e;
          font-weight: bold;
          font-size: 28rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>